<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>考试管理</title>
  <!-- import CSS -->
	<link rel="stylesheet" href="/css/elementui/index.css">
	<link rel="stylesheet" href="/css/exam/css/style.css">
	<link rel="stylesheet" href="/iconfont/iconfont.css">

  <style>
    #app .button a {
      text-decoration: none;
      color: aliceblue;
    }

    ;
  </style>
  <style type="text/css">
    .el-table th.el-table__cell>.cell {
      text-align: center !important;
    }

    ;
    /* .el-table td.el-table__cell div.idName{
      text-align: center !important;
    } */
  </style>
</head>

<body>
  <!-- 题库 -->
  <div id="app">
    <div  class="p-30">
    <!-- Function button right -->
        <el-form :inline="true" :model="filter">
          <el-button type="primary"><a href="{{ url('../admin/examview/addsubject') }}" style="display:block;color:#fff;text-decoration:none">添加试题</a>
          </el-button>
          <el-button type="primary"><a href="{{ url('/admin/examview/category') }}" style="display:block;color:#fff;text-decoration:none">分类管理</a>
          </el-button>
          <el-button type="danger" @click="allDelete">批量删除</el-button>
          <!-- Function button left -->

          <el-button type="primary" style="float:right;" @click="firstPageLoad()" type="primary">查&ensp;&ensp;询</el-button>

          <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="filter.title" style="float:right;width:200px;margin-left:10px">
          </el-input>

          <el-select style="display: flex;float:right" class="w-150px" placeholder="分类" v-model="filter.category_id" >
            <el-option v-for="(item, index) in categories" :key="index" :label="item.c_name" :value="item.id">
            </el-option>
          </el-select>
        </el-form>

      <!-- Form Page -->
      <p style="display:block;margin:15px 0;color: #409EFF;">已选择<span>@{{ total }}</span>项</p>
      <div class="fromPage">
        <el-table :header-cell-style="{ background: '#f1f2f9' }" ref="multipleSelection" :data="indexData" tooltip-effect="dark" style="width: 100%"  @selection-change="handleSelectionChange"  v-loading="loading">
          <el-table-column align="center" type="selection">
          </el-table-column>
          <el-table-column align="center" prop="id" label="ID" width="120">
          </el-table-column>
           <el-table-column prop="cid" label="分&ensp;&ensp;类" width="120">
			   <template  slot-scope="scope">
				   <span v-if="scope.row.cid==item.id" v-for="item in categories" :key="item.id">
				   @{{item.c_name}}
				   </span>                   
			   </template> 
          </el-table-column> 
           <el-table-column prop="difficulty" label="难&ensp;&ensp;度" width="120">
			   <template  slot-scope="scope">
				   <span v-if="scope.row.difficulty == 1">简单</span>                   
				   <span v-else-if="scope.row.difficulty == 2">中等</span>                   
				   <span v-else-if="scope.row.difficulty == 3">难</span>                   
				   <span v-else="scope.row.difficulty == 4">特别难</span>                   
			   </template>
          </el-table-column> 
          <el-table-column prop="exam_content" label="内&ensp;&ensp;容" >
          </el-table-column>
          <el-table-column label="操&ensp;&ensp;作">
            <template slot-scope="scope">              
              <el-button type="primary" size="mini"><a  style="color:#fff" :href="'/admin/examview/editsubject?id=' + scope.row.id">编&ensp;&ensp;辑</a></el-button><el-button type="danger" size="mini" @click.native.prevent="deleteRow(scope.$index, scope.row)">删&ensp;&ensp;除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

    <!-- Pager -->
      <div class="block">
        <el-pagination style="text-align: center;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,15,10,20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="indexData.length">
        </el-pagination>
      </div>
  </div>
  </div>
</body>
<script src="/css/exam/js/vue.js"></script>
<script src="/css/elementui/index.js"></script>
<script src="/css/exam/js/axios.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function() {
      return {
        filter: {
          category_id: null,
		  title:null,
        },
        categories: [],
        queryInfo: {
          companyName: '',
          pageNum: 1,
          pageSize: 100,
          total: 0
        },
        //控制loading加载
        loading: false,
        // select选中的值
        v: '',
        value: '',
        //select下拉框placeholder改变样式
        active: false,
        //表格左边分页
        menuLeftList: [],
        //编辑对话框显示与隐藏
        editDialogVisible: false,
        classify: [],
        multipleSelection: [],
        indexData: [], //题库列表数据
        loading: false,
        sels: [], //当前选框选中的值
        currentPage: 1, // 当前页码
        total: '', // 总条数
        pageSize: 10, // 每页的数据条数
        classifyForm: {},   
        ids:'',
      }
    },
    computed: {
      showStatus() {
        if (this.filter.category_id) {
          return true
        }
        return false
      },
    },
    created() {
      this.tableData()
      // this.FilterButton()
      this.getResults()
      this.getciddata()
    },
    updated() {
      //在数据更新的时候存进缓存

    },
    methods: {
      //查询按钮
      firstPageLoad() {
        this.currentPage = 1
        this.getResults()
      },
      // 查询按钮
      getResults() {
        if (this.loading) {
          return
        }
        this.loading = true
        axios.post('/admin/exam/index', {
          limit: this.pageSize,
          page: this.currentPage,
          title: this.filter.title,
          cid: this.filter.category_id
        }).then(res => {
          console.log('请求成功：' + res.data.data);
          this.indexData = res.data.data;
          this.count = res.data.count;
          this.loading = false

        }).catch(error => {
          console.log('请求失败：' + error);
          this.loading = false;
        })
      },
      //分类列表
      getciddata() {
        axios.post('/admin/exam/category_index?limit=' + 100)
          .then(res => {
            this.categories = res.data.data;
            console.log('请求成功' + res.data.data);
          }).catch(error => {
            console.log('请求失败：' + error);
          })
      },
      // 清空按钮
      // resetForm(formName) {
      //   this.$refs[formName].resetFields();
      // },
      // 批量删除按钮
      //这里是被选中的表格数据为数组
      //删除
      deleteRow(index, rows) {
        this.$confirm('确认操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          axios.post('/admin/exam/del', {
              id: rows.id
            })
            .then(res => {
             this.getResults();
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
	  //多选
	      handleSelectionChange(val) {
	        console.log('var',val);
	        let newbox = [];
	        for (var i = 0; i < val.length; i++) {
	          newbox.push(val[i].id);
	        }
	        this.ids = newbox;
	      },
	  
	   // 批量删除
	   allDelete() {
	      if (this.ids == "") {
	        this.$message.error("请选择需要删除的数据");
	        return;
	      }
	      this.$confirm("确认操作？", "警告", {
	        confirmButtonText: "确定",
	        cancelButtonText: "取消",
	        type: "warning",
	      })
	        .then(() => {
	          //点击确定按钮的操作
	          if (this.loading) {
	            return;
	          }
	  
	          this.loading = true;
	          let ids = this.ids.join(',')  
	            axios.post('/admin/exam/del',{id:ids})
	            .then(() => {
	              this.loading = false;
	              console.log('请求成功：');
	              this.getResults();
	            })
	            .catch((e) => {
	              this.loading = false;
	            });
	        })
	        .catch(() => {
	        });
	    },
		
      tableData() {
        let pid = this.id;
        axios.post('/admin/exam/index', {
            pid: pid
          })
          .then(res => {
            console.log('请求成功：', res.data.data);
            this.indexData = res.data.data;
            // console.log(res.data.data);
            // console.log(this.indexData);
          }).catch(error => {
            console.log('请求失败：' + error);
          })
      },
      // 分页器功能
      //每页条数改变时触发 选择一页显示多少行
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.currentPage = 1;
        this.pageSize = val;
        this.getResults();
      },
      //当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.getResults();
      }
    }
  })
</script>
<style>
  .el-table .el-table__cell:first-child{text-align: center;}
</style>
</html>